<template>
  <div id="app">
    <SelfAdaptingContainer @on-resize="handleMapResize">
      <div style="height: 30px">测试文字</div>
      <div id="map"></div>
    </SelfAdaptingContainer>
  </div>
</template>

<script>
import SelfAdaptingContainer from './components/SelfAdaptingContainer'
export default {
  name: 'App',
  components: { SelfAdaptingContainer },
  data() {
    return {}
  },
  mounted() {
    this.mapInit()
  },
  methods: {
    mapInit() {
      new window.AMap.Map('map', {
        viewMode: '2D', // 默认使用 2D 模式
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
      })
    },
    handleMapResize(perscaleW, perscaleH, scaleW, scaleH) {
      const elemMap = document.getElementById('map')
      elemMap.style.transformOrigin = '0 0'
      elemMap.style.transform = `scale(${1 / scaleW}, ${1 / scaleH})` // 抵消父级的scale，还原map容器

      // 窗口变更时，根据上次缩放比例计算地图的设计宽高。再根据当前缩放比例，计算当前地图容器实际要展示的宽高
      const { offsetWidth, offsetHeight } = elemMap
      const newWidth = (offsetWidth / perscaleW) * scaleW
      const newHeight = (offsetHeight / perscaleH) * scaleH
      elemMap.style.width = newWidth + 'px'
      elemMap.style.height = newHeight + 'px'
    }
  }
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  width: 100%;
  height: 100%;
}
#map {
  width: 1900px;
  height: 1030px;
}
</style>
